<template>
  <div id="app">
    <top-bar></top-bar>
    <div style="display: flex">
      <nav-bar v-if="navShow" style="flex-shrink: 0"></nav-bar>
      <div>
        <!-- 把路径对应的组件，替换在 router-view, 没有属性name时，默认默认渲染 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from 'view/nav/top-bar'
import navBar from 'view/nav/nav-bar'
import home from 'view/home'
export default {
  name: 'App',
  components: {
    navBar,
    topBar,
    home
  },
  computed: {
    navShow () {
      return this.$route.name !== 'login' &&
        this.$route.name !== 'register'
    }
  },
  data () {
    return {
      isCollapse: false
    }
  },
  directives: {
    focus: { // inserted时获取焦点：<input type="text" v-focus/>
      inserted: function (el) {
        el.focus()
      }
    }
  },
  methods: {
  }
}
</script>
